<template>
  <div class="workspace">
    <el-row :gutter="20">
      <!-- 营业数据 -->
      <el-col :span="24">
        <el-card class="data-card">
          <div slot="header" class="card-header">
            <i class="el-icon-data-line"></i>
            <span>今日运营数据</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" v-for="(item, index) in businessDataItems" :key="index">
              <div class="data-item">
                <i :class="item.icon"></i>
                <div class="data-content">
                  <div class="data-title">{{ item.title }}</div>
                  <div class="data-value">{{ formatValue(item.value, item.type) }}</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 订单管理数据 -->
      <el-col :span="24" class="order-overview">
        <el-card class="data-card">
          <div slot="header" class="card-header">
            <i class="el-icon-s-order"></i>
            <span>今日订单数据</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="4" v-for="(item, key) in orderOverview" :key="key">
              <div class="order-item">
                <div class="order-title">{{ getOrderTitle(key) }}</div>
                <div class="order-value">{{ item }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 菜品总览 -->
      <el-col :span="12">
        <el-card class="data-card">
          <div slot="header" class="card-header">
            <i class="el-icon-dish"></i>
            <span>今日产品售卖总览</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12" v-for="(value, key) in productOverview" :key="key">
              <div class="overview-item">
                <div class="overview-title">{{ getProductTitle(key) }}</div>
                <div class="overview-value">{{ value }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>

      <!-- 套餐总览 -->
      <el-col :span="12">
        <el-card class="data-card">
          <div slot="header" class="card-header">
            <i class="el-icon-food"></i>
            <span>今日售卖套餐总览</span>
          </div>
          <el-row :gutter="20">
            <el-col :span="12" v-for="(value, key) in setmealOverview" :key="key">
              <div class="overview-item">
                <div class="overview-title">{{ getSetmealTitle(key) }}</div>
                <div class="overview-value">{{ value }}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      businessData: {},
      orderOverview: {},
      productOverview: {},
      setmealOverview: {}
    };
  },
  computed: {
    businessDataItems() {
      return [
        { title: '营业额 (元)', value: this.businessData.turnover, icon: 'el-icon-money', type: 'currency' },
        { title: '有效订单数', value: this.businessData.validOrderCount, icon: 'el-icon-s-claim' },
        { title: '订单完成率', value: this.businessData.orderCompletionRate * 100, icon: 'el-icon-s-data', type: 'percentage' },
        { title: '平均客单价 (元)', value: this.businessData.unitPrice, icon: 'el-icon-price-tag' },
        { title: '新增用户数', value: this.businessData.newUsers, icon: 'el-icon-user' } // 确保这里有图标
      ];
    }
  },
  methods: {
    getBusinessData() {
      this.$http.get("/webPage/workspace/businessData").then(res => {
        this.businessData = res.data.data;
      });
    },
    getOrderOverview() {
      this.$http.get("/webPage/workspace/overviewOrders").then(res => {
        this.orderOverview = res.data.data;
      });
    },
    getProductOverview() {
      this.$http.get("/webPage/workspace/overviewDishes").then(res => {
        this.productOverview = res.data.data;
      });
    },
    getSetmealOverview() {
      this.$http.get("/webPage/workspace/overviewSetmeals").then(res => {
        this.setmealOverview = res.data.data;
      });
    },
    formatValue(value, type) {
      if (type === 'currency') return `${value}`;
      if (type === 'percentage') return `${value}%`;
      return value;
    },
    getOrderTitle(key) {
      const titles = {
        allOrders: '总订单数',
        completedOrders: '已完成订单',
        pendingOrders: '待处理订单',
        cancelledOrders: '已取消订单',
        deliveredOrders:'待派送订单',
        waitingOrders:'待接单'
      };
      return titles[key] || key; // 确保返回中文标题
    },
    getProductTitle(key) {
      const titles = {
       sold:"在售产品",
       discontinued:"停售产品"
      };
      return titles[key] || key; // 确保返回中文标题
    },
    getSetmealTitle(key) {
      const titles = {
       sold:'在售套餐',
       discontinued:"停售套餐"
      };
      return titles[key] || key; // 确保返回中文标题
    }
  },
  mounted() {
    this.getBusinessData();
    this.getOrderOverview();
    this.getProductOverview();
    this.getSetmealOverview();
  }
};
</script>

<style scoped>
.workspace {
  padding: 20px;
  background-color: #f5f9fc; /* 温和的蓝色背景 */
}

.data-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e4ebf1;
  background-color: #ffffff;
}

.card-header {
  font-size: 18px;
  font-weight: 500;
  color: #409EFF;
  display: flex;
  align-items: center;
}

.card-header i {
  margin-right: 10px;
  font-size: 20px;
}

.data-item, .order-item, .overview-item {
  padding: 10px;
  border-radius: 6px;
  text-align: center;
  background-color: #f9fbfd;
}

.data-title, .order-title, .overview-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  margin-bottom: 5px;
}

.data-value, .order-value, .overview-value {
  font-size: 20px;
  font-weight: 700;
  color: #000;
}

.order-overview {
  margin-top: 20px;
}

.order-overview .order-item {
  background-color: #e8f0fe;
}

.data-item i, .order-item i, .overview-item i {
  color: #409EFF;
  font-size: 24px;
}

.el-col {
  margin-bottom: 20px;
}
</style>